<template>
  <div>
    <van-overlay :show="showCover">
      <div class="wrapper">
        <div class="init_content" v-if="showCover">
          <div class="user_action">
            <img
              :src="action"
              v-if="userTime > 0 && reason_to_showDialog != 3"
              @click="userClick"
            />
            <img
              :src="noAction"
              v-if="userTime <= 0 || reason_to_showDialog == 3"
            />
          </div>
          <div class="user_remain_time">
            <img
              :src="remainCount"
              v-if="userTime > 0 && reason_to_showDialog != 3"
            />
            <img
              :src="tomorrow"
              v-if="userTime <= 0 || reason_to_showDialog == 3"
            />
          </div>
          <div
            class="remain_time_num"
            v-if="userTime > 0 && reason_to_showDialog != 3"
          >
            {{ userTime }}
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import action from '../img/action.png'
import tomorrow from '../img/tomorrow.png'
import remainCount from '../img/remainCount.png'
import noAction from '../img/noAction.png'

export default {
  name: 'PopupOfHome',
  data(){
    return{
      //有次数图片路径
      action: action,
      //无次数图片路径
      noAction: noAction,
      //剩余次数图片路径
      remainCount: remainCount,
      //明天再来图片路径
      tomorrow: tomorrow,

    }
  },
  props:{
     showCover: {
      type: Boolean,
      default: true
    },
    userTime:{
        type:Number,
        default:0
    },
    reason_to_showDialog:{
        type:Number,
        default:0
    }
  },
  methods: {
    userClick(){
        this.$emit('goAction')
    }
  },    
}
</script>

<style scoped lang="scss">
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .init_content {
  background-image: url(../img/actionBg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: right;
  box-sizing: border-box;
  width: 757px;
  height: 450px;
  position: relative;
  font-size: 18px;
  padding: 0 30px;
  .user_action {
    position: absolute;
    bottom: 44px;
    left: 283px;
    img {
      width: 188px;
      height: 59px;
    }
  }
  .user_remain_time {
    position: absolute;
    bottom: 18px;
    left: 305px;
    img {
      width: 110px;
      height: 17px;
    }
  }
  .remain_time_num {
    position: absolute;
    bottom: 15px;
    right: 320px;
    width: 18px;
    height: 29px;
    line-height:29px;
    color: gold;
    font-size: 26px;
  }
  .title {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .rules {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .action {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  .remainNum {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;

    .num_content {
      width: 320px;
      height: 20px;
      border: 1px solid rgb(109, 107, 107);
      border-radius: 20px;
      text-align: center;
      font-size: 16px;
    }
  }
}
}
</style>
